<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <div style=" height: 100%; padding: 20px;">
                    <a-form layout="vertical" style="height:100%;">
                                <a-form-item :label="filterI18n('title','标题')">
                                    <a-input v-model:value="title"></a-input>
                                </a-form-item>

                                <a-form-item :label="filterI18n('defaultValues','默认值')">
                                    <a-date-picker
                                        style="width: 100%;"
                                        :locale="locale"
                                        @change="dateChange"
                                        format="YYYY-MM"
                                        picker="month"
                                        v-model:value="date"
                                    />
                                </a-form-item>
                    </a-form>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import filter from "./filter";
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default {
    name: "month-filter",
    mixins: [filter],
    data(){
        return{
            locale,
            date:''
        }
    },
    methods: {
        filterI18n(name, text, key) {
            return this.$ti18(name, text, "filterControllerLang", key);
        },
        //初始化配置
        initSetting() {
            if(this.row.settings){
                this.settings =this.row.settings;
                if(this.row.value){
                    this.date=dayjs(this.row.value,this.settings.format||'YYYY-MM');
                }
            }else {
                this.settings = {
                    format:"YYYY-MM"
                }
            }
        },
        //获取配置
        getSetting() {
            return this.settings;
        },
        dateChange(value) {
            this.defValue = value?dayjs(value).format('YYYY-MM'):'';
        },
    },
}
</script>

<style scoped>

</style>
